<template>
  <view>
    <view class="top">
      <image src="https://picsum.photos/id/183/300/300" class="yulan" mode="aspectFill"></image>

      <view class="suolue">
        <view>6种规格可选</view>

        <view class="pics">
          <view class="pic" v-for="i in 4" :key="i">
            <image src="https://picsum.photos/id/331/300/300" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="huodong xinpin">
      <view class="flex-row align-center">
        <image src="../../static/images/xpsf.png" style="width: 90rpx;height: 90rpx;" mode=""></image>
        <view class="flex-col">
          <view class="u-font-24 u-p-l-8">限购1份</view>
          <view class="u-font-40">￥9.90</view>
        </view>
      </view>

      <view class="countdown">
        <view class="u-m-b-8">距离结束仅剩</view>
        <u-count-down :timestamp="timestamp" color="#FF8D4F" separator-color="#fff" height="44"></u-count-down>
      </view>
    </view>

    <view class="huodong miaosha">
      <view class="flex-row align-center">
        <view class="flex-col">
          <view class="u-font-24 u-p-l-8">秒杀价</view>
          <view class="u-font-40">￥9.90</view>
        </view>
      </view>

      <view class="countdown">
        <view class="u-m-b-8">距离结束仅剩</view>
        <u-count-down :timestamp="timestamp" color="#FF8D4F" separator-color="#fff" height="44"></u-count-down>
      </view>
    </view>

    <view class="u-p-24 bg-white">
      <view class="u-line-2">
        <u-tag text="拼团" size="mini" class="u-m-r-16" mode="dark" shape="circle" bg-color="#ffb94b" />
        <text>法式香片法式香片法式香片法式香片法式香片法式香片法式香片法式香片法式香片</text>
      </view>
    </view>

    <view class="u-p-24 flex-row justify-between align-center">
      <view class="flex-row align-center">
        <view class="text-gray">合计:</view>
        <view class="u-font-40 text-red u-p-l-24">¥0.00</view>
      </view>
      <my-btn :size="[184, 56, 26]" bg="#FFB94B" color="#fff" round inline>加入购物车</my-btn>
    </view>

    <!-- 正在进行 -->
    <view class="block">
      <view class="title-bar">
        <view class="title">正在进行</view>
        <uni-icons type="arrowright" color="#CCCCCC"></uni-icons>
      </view>

      <view class="wrap flex-col">
        <view class="pin" v-for="i in 3" :key="i">
          <view class="avatars">
            <u-avatar class="avatar" src="https://picsum.photos/id/334/200/200" size="60"></u-avatar>
            <u-avatar class="avatar" src="/static/icons/pin.png" size="60"></u-avatar>
          </view>

          <view class="flex-row">
            <view class="u-m-l-8 u-m-r-8">剩余</view>
            <view class="u-m-l-8 u-m-r-8 text-black">00:23:15:16</view>
            <view class="u-m-l-8 u-m-r-8 text-orange">还剩1人</view>
          </view>

          <my-btn :size="[120, 48, 26]" bg="#F8A853" color="#fff" round inline>参团</my-btn>
        </view>
      </view>
    </view>

    <!-- 优惠 -->
    <view class="block">
      <view class="title-bar">
        <view class="title">优惠</view>
        <uni-icons type="arrowright" color="#CCCCCC"></uni-icons>
      </view>

      <view class="wrap flex-col">
        <view class="tag" v-for="i in 4" :key="i">
          <u-tag text="规格" mode="dark" shape="circle" bg-color="#ffb94b" />
          <view class="u-m-l-16">超出部分将按原价收费</view>
        </view>
      </view>
    </view>

    <!-- 详情 -->
    <view class="block">
      <view class="title-bar" @click="detailModal = true">
        <view class="title">商品详情</view>
        <uni-icons type="arrowright" color="#CCCCCC"></uni-icons>
      </view>

      <view class="wrap flex-col">
        <view class="tag" v-for="i in 4" :key="i">
          <u-tag text="规格" mode="dark" shape="circle" bg-color="#ffb94b" />
          <view class="u-m-l-16">超出部分将按原价收费</view>
        </view>
      </view>
    </view>

    <!-- 店铺 -->
    <view class="shop">
      <u-avatar src="https://picsum.photos/id/319/200/200" size="106"></u-avatar>
      <view class="info">
        <view class="flex-row align-center">
          <view class="name u-p-r-8 u-line-1">三只松鼠旗舰店</view>
          <my-btn :size="[80, 36, 20]" border="1px solid #000" round inline>关注</my-btn>
        </view>
        <view class="rate flex-row align-center u-p-t-12">
          <my-rate :rate="4.4"></my-rate>
        </view>
      </view>
      <view class="btn">
        <view>进入店铺</view>
        <uni-icons type="arrowright" size="20" color="#FFB849"></uni-icons>
      </view>
    </view>

    <!-- 评价 -->
    <view class="block">
      <view class="title-bar">
        <view class="title">评价</view>
        <uni-icons type="arrowright" color="#CCCCCC"></uni-icons>
      </view>

      <view class="wrap" @click="$goto('/pages/shop/pingjia')">
        <view class="avatars">
          <u-avatar class="avatar" src="https://picsum.photos/id/334/200/200" size="60"></u-avatar>
          <u-avatar class="avatar" src="https://picsum.photos/id/231/200/200" size="60"></u-avatar>
          <u-avatar class="avatar" src="https://picsum.photos/id/234/200/200" size="60"></u-avatar>
          <u-avatar class="avatar" src="https://picsum.photos/id/543/200/200" size="60"></u-avatar>
          <u-avatar class="avatar" src="https://picsum.photos/id/234/200/200" size="60"></u-avatar>
        </view>

        <view>共36条评价</view>
      </view>
    </view>

    <u-gap height="200"></u-gap>
    <view class="bar">
      <view class="left">
        <view>单购：</view>
        <view class="price">￥78</view>
      </view>
      <view class="right">
        <view>拼团：</view>
        <view class="price">￥78</view>
      </view>
    </view>

    <!-- 商品详情 -->
    <u-popup v-model="detailModal" mode="center" border-radius="24" height="600rpx">
      <view class="pop-container">
        <view class="pop-title">商品详情</view>

        <view class="good-detail">
          <view class="flex-row justify-between" v-for="i in 8" :key="i">
            <view class="key">配料表</view>
            <view class="val">面粉</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        rate: 4,
        timestamp: 86400,
        detailModal: false
      };
    }
  }
</script>

<style lang="scss">
  .top {
    position: relative;

    .yulan {
      width: 750rpx;
      height: 500rpx;
      object-fit: cover;
    }

    .suolue {
      width: 750rpx;
      height: 140rpx;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      bottom: 0;
      color: #fff;
      padding: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .pics {
        display: flex;
        align-items: center;
      }

      .pic {
        margin: 0 16rpx;
        border-radius: 8rpx;
        overflow: hidden;
      }

      .pic image {
        width: 90rpx;
        height: 90rpx;
        background: #E7E7E7;
      }
    }
  }

  .huodong {
    width: 750rpx;
    height: 116rpx;
    background: url(../../static/images/xinpinbj.png) center / cover no-repeat;
    color: #fff;
    padding: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.miaosha {
      background: url(../../static/images/miaoshabj.png) center / cover no-repeat;
    }
  }

  .shop {
    width: 750rpx;
    height: 130rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    padding: 12rpx 24rpx;

    .info {
      width: 400rpx;

      .name {
        font-size: 30rpx;
      }
    }

    .btn {
      width: 150rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26rpx;
      line-height: 26rpx;
      color: #FFB849;
    }
  }

  .pin {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8rpx 0;
  }

  .tag {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8rpx 0;
  }

  .block {
    padding: 24rpx;
    background: #fff;
    margin: 24rpx 0;

    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
    }

    .title {
      font-size: 32rpx;
      font-weight: bold;
      position: relative;

      // &::after {
      //   width: 120%;
      //   height: 6rpx;
      //   border-radius: 6rpx;
      //   background: #f8a853;
      //   content: '';
      //   position: absolute;
      //   left: 0;
      //   bottom: 0;
      //   transform: translateY(200%);
      // }
    }
  }

  .wrap {
    width: 100%;
    background: #F2F2F2;
    border-radius: 10rpx;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #CCCCCC;
    font-size: 28rpx;
  }

  .avatars {
    display: flex;
    align-items: center;

    .avatar {
      margin-left: -32rpx;

      &:nth-of-type(1) {
        margin-left: 0;
      }
    }
  }

  .bar {
    width: 750rpx;
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    color: #fff;
    display: flex;
    justify-content: space-between;

    .left {
      width: 50%;
      height: 100%;
      background: #121524;
    }

    .right {
      width: 50%;
      height: 100%;
      background: #f8a853;
    }

    .left,
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .price {
      font-size: 40rpx;
    }
  }

  .good-detail {
    
    .flex-row {
      padding: 24rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      
      .key {
        width: 120rpx;
      }
      
      .val {
        width: 440rpx;
        color: #999;
      }
    }
  }
</style>
